// Grid System
// -----------



// Table columns
.tableColumns(@columnSpan: 1) {
    float: none; // undo default grid column styles
    width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
    margin-left: 0; // undo default grid column styles
}

// Make a Grid
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
.makeRow() {
    margin-left: @gridGutterWidth * -1;
    .clearfix();
}
.makeColumn(@columns: 1, @offset: 0) {
    float: left;
    margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}

// The Grid
#grid {

    .core (@gridColumnWidth, @gridGutterWidth) {

        .spanX (@index) when (@index > 0) {
            (~".f-col@{index}") { .span(@index); }
            .spanX(@index - 1);
        }
        .spanX (0) {}

        .offsetX (@index) when (@index > 0) {
            (~".f-offset@{index}") { .offset(@index); }
            .offsetX(@index - 1);
        }
        .offsetX (0) {}

        .offset (@columns) {
            margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
        }

        .span (@columns) {
            width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
        }

        .f-row {
            //margin-left: @gridGutterWidth * -1;
            .clearfix();
        }

        [class*="f-col"] {
            float: left;
            margin-left: @gridGutterWidth;
        }
        [class*="f-col"]:first-child {
            margin-left: 0px;
        }
    // Set the container width, and override it for fixed navbars in media queries
        .f-container{
            .span(@gridColumns);
            .center-block();
        }

    // generate .spanX and .offsetX
        .spanX (@gridColumns);
        .offsetX (@gridColumns);

    }

    .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {

        .spanX (@index) when (@index > 0) {
            (~".f-col@{index}") { .span(@index); }
            .spanX(@index - 1);
        }
        .spanX (0) {}

        .offsetX (@index) when (@index > 0) {
            (~'.f-offset@{index}') { .offset(@index); }
            (~'.f-offset@{index}:first-child') { .offsetFirstChild(@index); }
            .offsetX(@index - 1);
        }
        .offsetX (0) {}

        .offset (@columns) {
            margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
            *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
        }

        .offsetFirstChild (@columns) {
            margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
            *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
        }

        .span (@columns) {
            width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
            *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
        }

        .row-fluid {
            width: 100%;
            .clearfix();
            [class*="f-col"] { 
                .input-block-level();
                float: left;
                margin-left: @fluidGridGutterWidth;
                *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
            }
            [class*="f-col"]:first-child {
                margin-left: 0;
            }

        // generate .spanX and .offsetX
            .spanX (@gridColumns);
            .offsetX (@gridColumns);
        }

    }

    .input(@gridColumnWidth, @gridGutterWidth) {

        .spanX (@index) when (@index > 0) {
            (~"input.f-col@{index}, textarea.f-col@{index}, .uneditable-input.f-col@{index}") { .span(@index); }
            .spanX(@index - 1);
        }
        .spanX (0) {}

        .span(@columns) {
            width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
        }

        input,
        textarea,
        .uneditable-input {
            margin-left: 0; // override margin-left from core grid system
        }

    // Space grid-sized controls properly if multiple per line
        .controls-row [class*="span"] + [class*="span"] {
            margin-left: @gridGutterWidth;
        }

    // generate .spanX
        .spanX (@gridColumns);

    }

}
